<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>草稿供应商列表</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">

    <style type="text/css">
      [v-cloak] { display: none }
      .bd-light { border: 1px solid rgba(0, 0, 0, .1) }
      .layui-form-select {
          width: 200px;
          display: inline-block
      }
    </style>
  </head>
  <body>
    <div id="q-supplier" v-cloak class="q-pa-sm">
      <q-card class="bg-white no-shadow full-width">
        <q-card-main class="">
          <q-tabs v-model="selectedTab" inverted color="secondary" align="justify">
            <q-tab slot="title" name="tab-1" :label="$t('全部')" @click="tabClick('')"></q-tab>
            <q-tab slot="title" name="tab-2" :label="$t('待发送邀请')" @click="tabClick('1')"></q-tab>
            <q-tab slot="title" name="tab-3" :label="$t('已发送邀请')" @click="tabClick('2')"></q-tab>
            <q-tab slot="title" name="tab-4" :label="$t('已接受邀请')" @click="tabClick('3')"></q-tab>
            <q-tab slot="title" name="tab-5" :label="$t('已拒绝邀请')" @click="tabClick('4')"></q-tab>
            <q-tab slot="title" name="tab-6" :label="$t('已注册')" @click="tabClick('5')"></q-tab>

            <q-tab-pane name="tab-1">
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商名称')"
                    v-model.trim="searchForm.search_LIKE_vendorName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商邮箱')"
                    v-model.trim="searchForm.search_LIKE_vendorEmail"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商联系人')"
                    v-model.trim="searchForm.search_LIKE_contactPeople"></q-input>
                </q-field>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      float-label="供应商联系电话"
                      v-model.trim="searchForm.search_LIKE_contactTelephone"></q-input>
                  </q-field>
                </q-slide-transition>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('数据来源')"
                      v-model.trim="searchForm.search_LIKE_dataSources"></q-input>
                  </q-field>
                </q-slide-transition>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  @click="getList({pagination: serverPagination})"
                  color="primary"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  color="secondary"
                  @click="reset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
                <q-btn
                  flat
                  size="sm"
                  class="q-mt-sm q-mr-xs q-pa-sm"
                  color="primary"
                  @click="toggleShowMoreSearch">
                  <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                  <span v-else>{{ $t('展开') }}</span>
                  <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                  <q-icon v-else name="keyboard arrow down" ></q-icon>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="data"
                dense
                :columns="allColumns"
                :visible-columns="allVisibleColumns"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading = "listLoading"
                :selected.sync="selected"
                :pagination.sync="serverPagination"
                @request="getList"
                row-key="id"
              >
                <template slot="top-right" slot-scope="props">
                  <q-table-columns
                    style="width:66px"
                    color="secondary"
                    class="q-mr-sm"
                    :label="$t('展示项')"
                    v-model="allVisibleColumns"
                    :columns="allColumns"
                  ></q-table-columns>
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                  ></q-btn>
                </template>
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="secondary"
                    flat
                    @click="goSupplierInvite"
                    :label="$t('邀请')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="secondary"
                    flat
                    @click="openAddModal"
                    :label="$t('新增')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    @click="supplierRestrict"
                    :label="$t('限制')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    :label="$t('删除')"
                    @click="deleteComfirm"></q-btn>
                </template>
                <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPagination.page"
                    input
                    boundary-links
                    direction-links
                    color="secondary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pages"></q-pagination>
                  页 &nbsp; 共 {{ total }} 条
                </div>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="openEditModal(props.row)"
                        color="secondary"
                      >
                        <q-icon name="edit" size="16px"></q-icon>
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="deleteRowComfirm(props.row)"
                        color="negative"
                        >
                        <q-icon name="delete" size="16px"></q-icon>
                      </q-btn>
                    </q-td>
                    <q-td
                      key="vendorName"
                      :props="props">{{ props.row.vendorName }}</q-td>
                    <q-td
                      key="invitationStatus"
                      :props="props">
                      <q-chip small square color="positive">{{ invitationStatusToText(props.row.invitationStatus) }}</q-chip>
                    </q-td>
                    <q-td
                      key="vendorEmail"
                      :props="props">{{ props.row.vendorEmail }}</q-td>
                    <q-td
                      key="contactPeople"
                      :props="props">{{ props.row.contactPeople }}</q-td>
                    <q-td
                      key="contactTelephone"
                      :props="props">{{ props.row.contactTelephone }}</q-td>
                    <q-td
                      key="createTime"
                      :props="props">{{ props.row.createTime }}</q-td>
                    <q-td
                      key="lastUpdateTime"
                      :props="props">{{ props.row.lastUpdateTime }}</q-td>
                    <q-td
                      key="dataSources"
                      :props="props">{{ props.row.dataSources }}</q-td>
                  </q-tr>
                  <!-- 展开行 -->
                </template>
              </q-table>
            </q-tab-pane>
            <q-tab-pane name="tab-2">
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商名称')"
                    v-model.trim="searchForm.search_LIKE_vendorName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商邮箱')"
                    v-model.trim="searchForm.search_LIKE_vendorEmail"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商联系人')"
                    v-model.trim="searchForm.search_LIKE_contactPeople"></q-input>
                </q-field>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      float-label="供应商联系电话"
                      v-model.trim="searchForm.search_LIKE_contactTelephone"></q-input>
                  </q-field>
                </q-slide-transition>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('数据来源')"
                      v-model.trim="searchForm.search_LIKE_dataSources"></q-input>
                  </q-field>
                </q-slide-transition>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  @click="getList({pagination: serverPagination})"
                  color="primary"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  color="secondary"
                  @click="reset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
                <q-btn
                  flat
                  size="sm"
                  class="q-mt-sm q-mr-xs q-pa-sm"
                  color="primary"
                  @click="toggleShowMoreSearch">
                  <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                  <span v-else>{{ $t('展开') }}</span>
                  <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                  <q-icon v-else name="keyboard arrow down" ></q-icon>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="data"
                dense
                :columns="columns"
                :visible-columns="visibleColumns"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading = "listLoading"
                :selected.sync="selected"
                :pagination.sync="serverPagination"
                @request="getList"
                row-key="id"
              >
                <template slot="top-right" slot-scope="props">
                  <q-table-columns
                    style="width:66px"
                    color="secondary"
                    class="q-mr-sm"
                    :label="$t('展示项')"
                    v-model="visibleColumns"
                    :columns="columns"
                  ></q-table-columns>
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                  ></q-btn>
                </template>
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="secondary"
                    flat
                    @click="goSupplierInvite"
                    :label="$t('邀请')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="secondary"
                    flat
                    @click="openAddModal"
                    :label="$t('新增')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    @click="supplierRestrict"
                    :label="$t('限制')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    :label="$t('删除')"
                    @click="deleteComfirm"></q-btn>
                </template>
                <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPagination.page"
                    input
                    boundary-links
                    direction-links
                    color="secondary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pages"></q-pagination>
                  页 &nbsp; 共 {{ total }} 条
                </div>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="openEditModal(props.row)"
                        color="secondary"
                      >
                        <q-icon name="edit" size="16px"></q-icon>
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="deleteRowComfirm(props.row)"
                        color="negative"
                        >
                        <q-icon name="delete" size="16px"></q-icon>
                      </q-btn>
                    </q-td>
                    <q-td
                      key="vendorName"
                      :props="props">{{ props.row.vendorName }}</q-td>
                    <q-td
                      key="vendorEmail"
                      :props="props">{{ props.row.vendorEmail }}</q-td>
                    <q-td
                      key="contactPeople"
                      :props="props">{{ props.row.contactPeople }}</q-td>
                    <q-td
                      key="contactTelephone"
                      :props="props">{{ props.row.contactTelephone }}</q-td>
                    <q-td
                      key="createTime"
                      :props="props">{{ props.row.createTime }}</q-td>
                    <q-td
                      key="lastUpdateTime"
                      :props="props">{{ props.row.lastUpdateTime }}</q-td>
                    <q-td
                      key="dataSources"
                      :props="props">{{ props.row.dataSources }}</q-td>
                  </q-tr>
                  <!-- 展开行 -->
                </template>
              </q-table>
            </q-tab-pane>
            <q-tab-pane name="tab-3">
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商名称')"
                    v-model.trim="searchForm.search_LIKE_vendorName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商邮箱')"
                    v-model.trim="searchForm.search_LIKE_vendorEmail"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商联系人')"
                    v-model.trim="searchForm.search_LIKE_contactPeople"></q-input>
                </q-field>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      float-label="供应商联系电话"
                      v-model.trim="searchForm.search_LIKE_contactTelephone"></q-input>
                  </q-field>
                </q-slide-transition>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('数据来源')"
                      v-model.trim="searchForm.search_LIKE_dataSources"></q-input>
                  </q-field>
                </q-slide-transition>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  @click="getList({pagination: serverPagination})"
                  color="primary"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  color="secondary"
                  @click="reset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
                <q-btn
                  flat
                  size="sm"
                  class="q-mt-sm q-mr-xs q-pa-sm"
                  color="primary"
                  @click="toggleShowMoreSearch">
                  <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                  <span v-else>{{ $t('展开') }}</span>
                  <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                  <q-icon v-else name="keyboard arrow down" ></q-icon>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="data"
                dense
                :columns="columns"
                :visible-columns="visibleColumns"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading = "listLoading"
                :selected.sync="selected"
                :pagination.sync="serverPagination"
                @request="getList"
                row-key="id"
              >
                <template slot="top-right" slot-scope="props">
                  <q-table-columns
                    style="width:66px"
                    color="secondary"
                    class="q-mr-sm"
                    :label="$t('展示项')"
                    v-model="visibleColumns"
                    :columns="columns"
                  ></q-table-columns>
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                  ></q-btn>
                </template>
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="secondary"
                    flat
                    @click="goSupplierInvite"
                    :label="$t('重新邀请')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    @click="supplierRestrict"
                    :label="$t('限制')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    :label="$t('删除')"
                    @click="deleteComfirm"></q-btn>
                </template>
                <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPagination.page"
                    input
                    boundary-links
                    direction-links
                    color="secondary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pages"></q-pagination>
                  页 &nbsp; 共 {{ total }} 条
                </div>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="openEditModal(props.row)"
                        color="secondary"
                      >
                        <q-icon name="edit" size="16px"></q-icon>
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="deleteRowComfirm(props.row)"
                        color="negative"
                        >
                        <q-icon name="delete" size="16px"></q-icon>
                      </q-btn>
                    </q-td>
                    <q-td
                      key="vendorName"
                      :props="props">{{ props.row.vendorName }}</q-td>
                    <q-td
                      key="vendorEmail"
                      :props="props">{{ props.row.vendorEmail }}</q-td>
                    <q-td
                      key="contactPeople"
                      :props="props">{{ props.row.contactPeople }}</q-td>
                    <q-td
                      key="contactTelephone"
                      :props="props">{{ props.row.contactTelephone }}</q-td>
                    <q-td
                      key="createTime"
                      :props="props">{{ props.row.createTime }}</q-td>
                    <q-td
                      key="lastUpdateTime"
                      :props="props">{{ props.row.lastUpdateTime }}</q-td>
                    <q-td
                      key="dataSources"
                      :props="props">{{ props.row.dataSources }}</q-td>
                  </q-tr>
                  <!-- 展开行 -->
                </template>
              </q-table>
            </q-tab-pane>
            <q-tab-pane name="tab-4">
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商名称')"
                    v-model.trim="searchForm.search_LIKE_vendorName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商邮箱')"
                    v-model.trim="searchForm.search_LIKE_vendorEmail"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商联系人')"
                    v-model.trim="searchForm.search_LIKE_contactPeople"></q-input>
                </q-field>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      float-label="供应商联系电话"
                      v-model.trim="searchForm.search_LIKE_contactTelephone"></q-input>
                  </q-field>
                </q-slide-transition>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('数据来源')"
                      v-model.trim="searchForm.search_LIKE_dataSources"></q-input>
                  </q-field>
                </q-slide-transition>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  @click="getList({pagination: serverPagination})"
                  color="primary"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  color="secondary"
                  @click="reset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
                <q-btn
                  flat
                  size="sm"
                  class="q-mt-sm q-mr-xs q-pa-sm"
                  color="primary"
                  @click="toggleShowMoreSearch">
                  <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                  <span v-else>{{ $t('展开') }}</span>
                  <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                  <q-icon v-else name="keyboard arrow down" ></q-icon>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="data"
                dense
                :columns="columns"
                :visible-columns="visibleColumns"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading = "listLoading"
                :selected.sync="selected"
                :pagination.sync="serverPagination"
                @request="getList"
                row-key="id"
              >
                <template slot="top-right" slot-scope="props">
                  <q-table-columns
                    style="width:66px"
                    color="secondary"
                    class="q-mr-sm"
                    :label="$t('展示项')"
                    v-model="visibleColumns"
                    :columns="columns"
                  ></q-table-columns>
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                  ></q-btn>
                </template>
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="negative"
                    flat
                    @click="supplierRestrict"
                    :label="$t('限制')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    :label="$t('删除')"
                    @click="deleteComfirm"></q-btn>
                </template>
                <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPagination.page"
                    input
                    boundary-links
                    direction-links
                    color="secondary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pages"></q-pagination>
                  页 &nbsp; 共 {{ total }} 条
                </div>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="openEditModal(props.row)"
                        color="secondary"
                      >
                        <q-icon name="edit" size="16px"></q-icon>
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="deleteRowComfirm(props.row)"
                        color="negative"
                        >
                        <q-icon name="delete" size="16px"></q-icon>
                      </q-btn>
                    </q-td>
                    <q-td
                      key="vendorName"
                      :props="props">{{ props.row.vendorName }}</q-td>
                    <q-td
                      key="vendorEmail"
                      :props="props">{{ props.row.vendorEmail }}</q-td>
                    <q-td
                      key="contactPeople"
                      :props="props">{{ props.row.contactPeople }}</q-td>
                    <q-td
                      key="contactTelephone"
                      :props="props">{{ props.row.contactTelephone }}</q-td>
                    <q-td
                      key="createTime"
                      :props="props">{{ props.row.createTime }}</q-td>
                    <q-td
                      key="lastUpdateTime"
                      :props="props">{{ props.row.lastUpdateTime }}</q-td>
                    <q-td
                      key="dataSources"
                      :props="props">{{ props.row.dataSources }}</q-td>
                  </q-tr>
                  <!-- 展开行 -->
                </template>
              </q-table>
            </q-tab-pane>
            <q-tab-pane name="tab-5">
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商名称')"
                    v-model.trim="searchForm.search_LIKE_vendorName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商邮箱')"
                    v-model.trim="searchForm.search_LIKE_vendorEmail"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商联系人')"
                    v-model.trim="searchForm.search_LIKE_contactPeople"></q-input>
                </q-field>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      float-label="供应商联系电话"
                      v-model.trim="searchForm.search_LIKE_contactTelephone"></q-input>
                  </q-field>
                </q-slide-transition>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('数据来源')"
                      v-model.trim="searchForm.search_LIKE_dataSources"></q-input>
                  </q-field>
                </q-slide-transition>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  @click="getList({pagination: serverPagination})"
                  color="primary"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  color="secondary"
                  @click="reset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
                <q-btn
                  flat
                  size="sm"
                  class="q-mt-sm q-mr-xs q-pa-sm"
                  color="primary"
                  @click="toggleShowMoreSearch">
                  <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                  <span v-else>{{ $t('展开') }}</span>
                  <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                  <q-icon v-else name="keyboard arrow down" ></q-icon>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="data"
                dense
                :columns="columns"
                :visible-columns="visibleColumns"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading = "listLoading"
                :selected.sync="selected"
                :pagination.sync="serverPagination"
                @request="getList"
                row-key="id"
              >
                <template slot="top-right" slot-scope="props">
                  <q-table-columns
                    style="width:66px"
                    color="secondary"
                    class="q-mr-sm"
                    :label="$t('展示项')"
                    v-model="visibleColumns"
                    :columns="columns"
                  ></q-table-columns>
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                  ></q-btn>
                </template>
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="secondary"
                    flat
                    @click="goSupplierInvite"
                    :label="$t('重新邀请')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    @click="supplierRestrict"
                    :label="$t('限制')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    :label="$t('删除')"
                    @click="deleteComfirm"></q-btn>
                </template>
                <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPagination.page"
                    input
                    boundary-links
                    direction-links
                    color="secondary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pages"></q-pagination>
                  页 &nbsp; 共 {{ total }} 条
                </div>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="openEditModal(props.row)"
                        color="secondary"
                      >
                        <q-icon name="edit" size="16px"></q-icon>
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="deleteRowComfirm(props.row)"
                        color="negative"
                        >
                        <q-icon name="delete" size="16px"></q-icon>
                      </q-btn>
                    </q-td>
                    <q-td
                      key="vendorName"
                      :props="props">{{ props.row.vendorName }}</q-td>
                    <q-td
                      key="vendorEmail"
                      :props="props">{{ props.row.vendorEmail }}</q-td>
                    <q-td
                      key="contactPeople"
                      :props="props">{{ props.row.contactPeople }}</q-td>
                    <q-td
                      key="contactTelephone"
                      :props="props">{{ props.row.contactTelephone }}</q-td>
                    <q-td
                      key="createTime"
                      :props="props">{{ props.row.createTime }}</q-td>
                    <q-td
                      key="lastUpdateTime"
                      :props="props">{{ props.row.lastUpdateTime }}</q-td>
                    <q-td
                      key="dataSources"
                      :props="props">{{ props.row.dataSources }}</q-td>
                  </q-tr>
                  <!-- 展开行 -->
                </template>
              </q-table>
            </q-tab-pane>
            <q-tab-pane name="tab-6">
              <div class="row justify-start gutter-sm q-px-sm">
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商名称')"
                    v-model.trim="searchForm.search_LIKE_vendorName"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商邮箱')"
                    v-model.trim="searchForm.search_LIKE_vendorEmail"></q-input>
                </q-field>
                <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                  <q-input
                    :float-label="$t('供应商联系人')"
                    v-model.trim="searchForm.search_LIKE_contactPeople"></q-input>
                </q-field>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      float-label="供应商联系电话"
                      v-model.trim="searchForm.search_LIKE_contactTelephone"></q-input>
                  </q-field>
                </q-slide-transition>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-select
                      :float-label="$t('审批状态')"
                      :options="statusOptions"
                      v-model="searchForm.search_EQ_examineStatus"></q-select>
                  </q-field>
                </q-slide-transition>
                <q-slide-transition>
                  <q-field v-if="isShowMoreSearch" class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('数据来源')"
                      v-model.trim="searchForm.search_LIKE_dataSources"></q-input>
                  </q-field>
                </q-slide-transition>
              </div>
              <div class="row justify-end q-my-sm">
                <q-btn
                  size="sm"
                  @click="getList({pagination: serverPagination})"
                  color="primary"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="search"></q-icon>
                  <span>{{ $t('查询') }}</span>
                </q-btn>
                <q-btn
                  size="sm"
                  color="secondary"
                  @click="reset"
                  class="q-mt-sm q-mr-sm q-pa-sm">
                  <q-icon name="refresh" ></q-icon>
                  <span>{{ $t('重置') }}</span>
                </q-btn>
                <q-btn
                  flat
                  size="sm"
                  class="q-mt-sm q-mr-xs q-pa-sm"
                  color="primary"
                  @click="toggleShowMoreSearch">
                  <span v-if="isShowMoreSearch">{{ $t('收起') }}</span>
                  <span v-else>{{ $t('展开') }}</span>
                  <q-icon v-if="isShowMoreSearch" name="keyboard arrow up" ></q-icon>
                  <q-icon v-else name="keyboard arrow down" ></q-icon>
                </q-btn>
              </div>
              <q-table
                class="no-shadow"
                :data="data"
                dense
                :columns="columnsTab6"
                :visible-columns="visibleColumnsTab6"
                :rows-per-page-options="[5, 10, 20]"
                selection="multiple"
                :loading = "listLoading"
                :selected.sync="selected"
                :pagination.sync="serverPagination"
                @request="getList"
                row-key="id"
              >
                <template slot="top-right" slot-scope="props">
                  <q-table-columns
                    style="width:66px"
                    color="secondary"
                    class="q-mr-sm"
                    :label="$t('展示项')"
                    v-model="visibleColumnsTab6"
                    :columns="columnsTab6"
                  ></q-table-columns>
                  <q-btn
                    flat round dense
                    :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
                    @click="props.toggleFullscreen"
                  ></q-btn>
                </template>
                <template slot="top-left" slot-scope="props">
                  <q-btn
                    color="secondary"
                    flat
                    @click="supplierAllow"
                    :label="$t('通过')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="secondary"
                    flat
                    @click="supplierReject"
                    :label="$t('驳回')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    @click="supplierRestrict"
                    :label="$t('限制')"
                    class="q-mr-sm" ></q-btn>
                  <q-btn
                    color="negative"
                    flat
                    :label="$t('删除')"
                    @click="deleteComfirm"></q-btn>
                </template>
                <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                  第
                  <q-pagination
                    v-model="serverPagination.page"
                    input
                    boundary-links
                    direction-links
                    color="secondary"
                    :max-pages="5"
                    :ellipses="true"
                    :max="pages"></q-pagination>
                  页 &nbsp; 共 {{ total }} 条
                </div>
                <template slot="body" slot-scope="props">
                  <q-tr
                    :props="props"
                  >
                    <q-td >
                      <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                    </q-td>
                    <q-td key="action" :props="props" >
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="openFormHtmlModal(props.row.id)"
                        color="secondary"
                      >
                        <q-icon name="find_in_page" size="16px"></q-icon>
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="openEditModal(props.row)"
                        color="secondary"
                      >
                        <q-icon name="edit" size="16px"></q-icon>
                      </q-btn>
                      <q-btn
                        flat
                        round
                        size="xs"
                        @click="deleteRowComfirm(props.row)"
                        color="negative"
                        >
                        <q-icon name="delete" size="16px"></q-icon>
                      </q-btn>
                    </q-td>
                    <q-td
                      key="vendorName"
                      :props="props">{{ props.row.vendorName }}</q-td>
                    <q-td
                      key="vendorEmail"
                      :props="props">{{ props.row.vendorEmail }}</q-td>
                    <q-td
                      key="contactPeople"
                      :props="props">{{ props.row.contactPeople }}</q-td>
                    <q-td
                      key="contactTelephone"
                      :props="props">{{ props.row.contactTelephone }}</q-td>
                    <q-td
                      key="createTime"
                      :props="props">{{ props.row.createTime }}</q-td>
                    <q-td
                      key="lastUpdateTime"
                      :props="props">{{ props.row.lastUpdateTime }}</q-td>
                    <q-td
                      key="examineStatus"
                      :props="props">
                      <q-chip v-if="props.row.examineStatus == '-1'" dense square color="warning">未提交</q-chip>
                      <q-chip v-if="props.row.examineStatus == '0'" dense square color="secondary">未审核</q-chip>
                      <q-chip v-if="props.row.examineStatus == '1'" dense square color="positive">通过</q-chip>
                      <q-chip v-if="props.row.examineStatus == '2'" dense square color="negative">驳回</q-chip>
                    </q-td>
                    <q-td
                      key="examineContent"
                      :props="props">{{ props.row.examineContent }}</q-td>
                    <q-td
                      key="dataSources"
                      :props="props">{{ props.row.dataSources }}</q-td>
                  </q-tr>
                  <!-- 展开行 -->
                </template>
              </q-table>
            </q-tab-pane>
          </q-tabs>
          
          <q-modal no-backdrop-dismiss v-model="addOrEditModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
            <q-modal-layout>
              <q-toolbar slot="header" color="white">
                <q-toolbar-title class="text-dark">
                  {{ addOrEdit === 0 ? $t("新增") : $t("编辑") }}
                </q-toolbar-title>
                <q-btn flat @click="addOrEditModal = false">
                  <q-icon name="close" color="dark"></q-icon>
                </q-btn>
              </q-toolbar>
              <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
                <q-card-main class="row gutter-x-md gutter-y-sm">
                  <q-field 
                    :error="$v.addOrEditForm.vendorName.$error"
                    :error-label="$v.addOrEditForm.vendorName.required ? ($v.addOrEditForm.vendorName.isUnique ? '': '该供应商已存在'): '供应商名称为必填项'"
                    class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('供应商名称')"
                      @blur="$v.addOrEditForm.vendorName.$touch"
                      v-model="addOrEditForm.vendorName"></q-input>
                  </q-field>
                  <q-field 
                    :error="$v.addOrEditForm.vendorEmail.$error"
                    :error-label="$v.addOrEditForm.vendorEmail.required ? ($v.addOrEditForm.vendorEmail.email ? ($v.addOrEditForm.vendorEmail.isUnique ? '': '该邮箱已存在'): '请填写正确的邮箱格式'): '供应商名称为必填项'"
                    class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('供应商邮箱')"
                      @blur="$v.addOrEditForm.vendorEmail.$touch"
                      v-model="addOrEditForm.vendorEmail"></q-input>
                  </q-field>
                  <q-field 
                    :error="$v.addOrEditForm.contactPeople.$error"
                    error-label="供应商联系人为必填项"
                    class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('供应商联系人')"
                      @blur="$v.addOrEditForm.contactPeople.$touch"
                      v-model="addOrEditForm.contactPeople"></q-input>
                  </q-field>
                  <q-field 
                    class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('供应商联系电话')"
                      v-model="addOrEditForm.contactTelephone"></q-input>
                  </q-field>
                  <q-field 
                    :error="$v.addOrEditForm.remarks.$error"
                    error-label="备注为必填项"
                    class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <q-input
                      :float-label="$t('备注')"
                      type="textarea"
                      :max-height="100"
                      rows="4"
                      @blur="$v.addOrEditForm.remarks.$touch"
                      v-model="addOrEditForm.remarks"></q-input>
                  </q-field>
                </q-card-main>
              </q-card>
              <q-toolbar slot="footer" color="white" class="row justify-end">
                <q-btn
                  flat
                  color="primary"
                  @click="addOrEditModal = false">{{$t("取消")}}</q-btn>
                <q-btn
                  flat
                  :loading="btnLoading"
                  color="primary"
                  v-if="addOrEdit === 0"
                  @click="saveAddHandler">{{$t("保存")}}</q-btn>
                <q-btn
                  flat
                  :loading="btnLoading"
                  color="primary"
                  v-else
                  @click="saveEditHandler">{{$t("保存")}}</q-btn>
              </q-toolbar>
            </q-modal-layout>
          </q-modal>
          <q-modal no-backdrop-dismiss v-model="lookFormHtmlModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
            <q-modal-layout>
              <q-toolbar slot="header" color="white">
                <q-toolbar-title class="text-dark">
                  查看
                </q-toolbar-title>
                <q-btn flat @click="lookFormHtmlModal = false">
                  <q-icon name="close" color="dark"></q-icon>
                </q-btn>
              </q-toolbar>
              <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
                <q-card-main class="row" v-html="expandRowHtml">
                  
                </q-card-main>
              </q-card>
              <q-toolbar slot="footer" color="white" class="row justify-end">
                <q-btn
                  flat
                  color="primary"
                  @click="lookFormHtmlModal = false">{{$t("关闭")}}</q-btn>
              </q-toolbar>
            </q-modal-layout>
          </q-modal>
          <q-modal no-backdrop-dismiss v-model="supplierAllowModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
            <q-modal-layout>
              <q-toolbar slot="header" color="white">
                <q-toolbar-title class="text-dark">
                  确认通过
                </q-toolbar-title>
                <q-btn flat @click="supplierAllowModal = false">
                  <q-icon name="close" color="dark"></q-icon>
                </q-btn>
              </q-toolbar>
              <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
                <q-card-main class="row">
                  <q-stepper v-model="confirmStep" color="secondary" contractable vertical style="width:600px">
                    <q-step name="baseInfo" title="基本信息" >
                      <q-field 
                        :error="$v.allowForm.loginName.$error"
                        error-label="供应商名称为必填项"
                        class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <q-input
                          :float-label="$t('登录账号')"
                          @blur="$v.allowForm.loginName.$touch"
                          v-model="allowForm.loginName"></q-input>
                      </q-field>
                      <q-field 
                        :error="$v.allowForm.content.$error"
                        error-label="通过理由为必填项"
                        class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <q-input
                        :float-label="$t('通过理由')"
                        @blur="$v.allowForm.content.$touch"
                        v-model="allowForm.content"></q-input>
                      </q-field>
                      <q-toggle 
                        v-model="allowForm.isemail" 
                        class="q-mt-md"
                        color="secondary"
                        left-label
                        true-value="1"
                        false-value="0"
                        label="邮件通知" ></q-toggle>
                      <q-stepper-navigation>
                        <q-btn
                          color="secondary"
                          @click="confirmStep = 'meterialClassify'"
                          label="下一步"
                        ></q-btn>
                      </q-stepper-navigation>
                    </q-step>
                    <q-step name="meterialClassify" title="物料分类" >
                      <!-- <q-field 
                        :error="$v.allowForm.materialCategoryIds.$error"
                        error-label=""
                        class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <q-select
                          multiple
                          :float-label="$t('物料类别')"
                          :options="materialsOptions"
                          @blur="$v.allowForm.materialCategoryIds.$touch"
                          v-model="allowForm.materialCategoryIds"></q-select>
                      </q-field> -->
                      <q-inner-loading :visible="visible">
                        <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
                      </q-inner-loading>
                      <q-search v-model="searchNodes"></q-search>
                      <q-tree
                        class="q-mt-md tree-styl"
                        color="secondary"
                        :nodes="meterialLevelData"
                        node-key="value"
                        :filter="searchNodes"
                        no-results-label="没有找到结果"
                        :expanded.sync="expandedNodes"
                        :selected.sync="nodeSelected"
                        tickable
                        tick-strategy="leaf"
                        :ticked.sync="nodeTicked"
                      ></q-tree>
                      <q-stepper-navigation>
                        <q-btn
                          color="secondary"
                          @click="confirmStep = 'baseInfo'"
                          label="上一步"
                        ></q-btn>
                      </q-stepper-navigation>
                    </q-step>
                  </q-stepper>
                </q-card-main>
              </q-card>
              <q-toolbar slot="footer" color="white" class="row justify-end">
                <q-btn
                  flat
                  color="primary"
                  @click="supplierAllowModal = false">{{$t("取消")}}</q-btn>
                <q-btn
                  flat
                  :loading="allowBtnLoading"
                  color="primary"
                  @click="supplierAllowConfirm">{{$t("确认")}}</q-btn>
              </q-toolbar>
            </q-modal-layout>
          </q-modal>
          <q-modal no-backdrop-dismiss v-model="supplierRejectModal" :content-css="{minWidth: '66vw', minHeight: '550px',borderRadius: '4px'}">
            <q-modal-layout>
              <q-toolbar slot="header" color="white">
                <q-toolbar-title class="text-dark">
                  确认驳回
                </q-toolbar-title>
                <q-btn flat @click="supplierRejectModal = false">
                  <q-icon name="close" color="dark"></q-icon>
                </q-btn>
              </q-toolbar>
              <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
                <q-card-main class="row gutter-x-md gutter-y-sm">
                  <q-toggle 
                    v-model="rejectForm.limitSupplier" 
                    color="secondary"
                    left-label
                    true-value="1"
                    false-value="0"
                    label="禁止注册" ></q-toggle>
                  <q-field 
                    label="驳回理由"
                    class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <q-editor
                      min-height="300px"
                      max-height="400px"
                      style="width:100%"
                      :definitions="editorOptions"
                      :toolbar="toolbarOptions"
                      :fonts="fontsOptions"
                      v-model="rejectForm.content">
                    </q-editor>
                  </q-field>
                </q-card-main>
              </q-card>
              <q-toolbar slot="footer" color="white" class="row justify-end">
                <q-btn
                  flat
                  color="primary"
                  @click="supplierRejectModal = false">{{$t("取消")}}</q-btn>
                <q-btn
                  flat
                  :loading="rejectBtnLoading"
                  color="primary"
                  @click="supplierRejectConfirm">{{$t("确认")}}</q-btn>
              </q-toolbar>
            </q-modal-layout>
          </q-modal>
        </q-card-main>
      </q-card>
    </div>
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- jquery -->
    <script src="../lib/js/jquery-2.2.4.min.js"></script>
    <!-- layui -->
    <script src="../lib/layui/layui.js"></script>
    <!-- babel for es6 transform -->
    <script src="../lib/js/babel.min.js"></script>
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sop/supplier.js"></script>
    
    <script type="text/babel">
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])

      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
      var email = window.validators.email

      var supplier = new Vue({
        el: '#q-supplier',
        i18n: i18n,
        data: function () {
          return {
            lookId: '',
            expandRowHtml: '',
            selectedTab: 'tab-1',
            invitationStatus: '',
            // 查询
            searchForm: {
              search_LIKE_vendorName: '',
              search_LIKE_vendorEmail: '',
              search_LIKE_contactPeople: '',
              search_LIKE_contactTelephone: '',
              search_LIKE_dataSources: '',
              search_EQ_examineStatus: null
            },
            statusOptions: [
              {
                label: '请选择',
                value: ' '
              },
              {
                label: '通过',
                value: 1
              },
              {
                label: '驳回',
                value: 2
              }
            ],
            isShowMoreSearch: false,
            // 表格数据
            data: [],
            total: 0,
            // 分页
            serverPagination: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 5
            },
            // 可见的列
            allVisibleColumns: [
              'action',
              'vendorName',
              'invitationStatus',
              'vendorEmail',
              'contactPeople',
              'contactTelephone',
              'createTime',
              'lastUpdateTime',
              'dataSources'
            ],
            visibleColumns: [
              'action',
              'vendorName',
              'vendorEmail',
              'contactPeople',
              'contactTelephone',
              'createTime',
              'lastUpdateTime',
              'dataSources'
            ],
            visibleColumnsTab6: [
              'action',
              'vendorName',
              'vendorEmail',
              'contactPeople',
              'contactTelephone',
              'createTime',
              'lastUpdateTime',
              'dataSources',
              'examineStatus',
              'examineContent'
            ],
            listLoading: false,
            btnLoading: false,
            rejectBtnLoading: false,
            allowBtnLoading: false,
            selected: [],
            addOrEdit: 1,  // 1 编辑 0 新增
            editModuleId: '',
            addOrEditModal: false,
            lookFormHtmlModal: false,
            supplierAllowModal: false,
            confirmStep: 'baseInfo',
            searchNodes: '', // 查询节点
            visible: false, // tree loading
            meterialLevelData: [], // 树的节点数据
            expandedNodes: [], // 展开的节点
            nodeSelected: [], // 当前的节点
            nodeTicked: [], // 勾选的节点
            supplierRejectModal: false,
            addOrEditForm: {
              vendorName: '',
              vendorEmail: '',
              contactPeople: '',
              contactTelephone: '',
              remarks: '',
              dataSources: '内部添加'
            },
            allowForm: {
              loginName: '',
              materialCategoryIds: [],
              isemail: '1',
              content: '符合要求'
            },
            materialsOptions: [
              {
                label: '一',
                value: '1'
              },
              {
                label: '二',
                value: '2'
              }
            ],
            rejectForm: {
              content: '',
              limitSupplier: '0'
            },
            fontsOptions: {
              arial: 'Arial',
              arial_black: 'Arial Black',
              comic_sans: 'Comic Sans MS',
              courier_new: 'Courier New',
              impact: 'Impact',
              lucida_grande: 'Lucida Grande',
              times_new_roman: 'Times New Roman',
              verdana: 'Verdana'
            },
            editorOptions: {

            }
          }
        },
        validations: {
          addOrEditForm: {
            vendorName: { 
              required: required, 
              isUnique: function(value) {
                if (value === ''){
                  return true
                } else {
                  return new Promise(function(resolve, reject) {
                    axios({
                      method: 'post',
                      url: '/manager/new/invitationToRegister/validationName',
                      data: {
                        vendorName: value
                      }
                    })
                    .then(function(data) {
                      if (data.statusCode == 200) {
                        resolve(true)
                      }
                      if (data.statusCode == 1011) {
                        resolve(false)
                      }
                    })
                    .catch(function(err) {
                      reject('')
                    })
                  })
                }
              }
            },
            vendorEmail: { 
              required: required, 
              email: email,
              isUnique: function(value) {
                if (value === ''){
                  return true
                } else {
                  return new Promise(function(resolve, reject) {
                    axios({
                      method: 'post',
                      url: '/manager/new/invitationToRegister/validationMailbox',
                      data: {
                        mailbox: value
                      },
                    })
                    .then(function(data) {
                      if (data.statusCode == 200) {
                        resolve(true)
                      }
                      if (data.statusCode == 1011) {
                        resolve(false)
                      }
                    })
                    .catch(function(err) {
                      reject('')
                    })
                  })
                }
              }
            },
            contactPeople: { required: required },
            remarks: { required: required }
          },
          allowForm: {
            loginName: { required: required },
            content: { required: required }
          }
        },
        computed: {
          // 表格配置
          allColumns: function() {
            return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'left'
              },
              {
                name: 'vendorName',
                label: this.$t('供应商名称'),
                align: 'left',
                field: 'vendorName',
                sortable: true
              },
              {
                name: 'invitationStatus',
                label: this.$t('邀请状态'),
                align: 'left',
                field: 'invitationStatus',
                sortable: true
              },
              {
                name: 'vendorEmail',
                label: this.$t('供应商邮箱'),
                align: 'left',
                field: 'vendorEmail',
              },
              {
                name: 'contactPeople',
                label: this.$t('供应商联系人'),
                align: 'left',
                field: 'contactPeople'
              },
              {
                name: 'createTime',
                label: this.$t('创建时间'),
                align: 'left',
                field: 'createTime',
                sortable: true
              },
              {
                name: 'lastUpdateTime',
                label: this.$t('最后更新时间'),
                align: 'left',
                field: 'lastUpdateTime',
                sortable: true
              },
              {
                name: 'dataSources',
                label: this.$t('数据来源'),
                align: 'left',
                field: 'dataSources',
                sortable: true
              }
            ]
          },
          columns: function() {
            return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'left'
              },
              {
                name: 'vendorName',
                label: this.$t('供应商名称'),
                align: 'left',
                field: 'vendorName',
                sortable: true
              },
              {
                name: 'vendorEmail',
                label: this.$t('供应商邮箱'),
                align: 'left',
                field: 'vendorEmail',
              },
              {
                name: 'contactPeople',
                label: this.$t('供应商联系人'),
                align: 'left',
                field: 'contactPeople'
              },
              {
                name: 'createTime',
                label: this.$t('创建时间'),
                align: 'left',
                field: 'createTime',
                sortable: true
              },
              {
                name: 'lastUpdateTime',
                label: this.$t('最后更新时间'),
                align: 'left',
                field: 'lastUpdateTime',
                sortable: true
              },
              {
                name: 'dataSources',
                label: this.$t('数据来源'),
                align: 'left',
                field: 'dataSources',
                sortable: true
              }
            ]
          },
          columnsTab6: function() {
            return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'left'
              },
              {
                name: 'vendorName',
                label: this.$t('供应商名称'),
                align: 'left',
                field: 'vendorName',
                sortable: true
              },
              {
                name: 'vendorEmail',
                label: this.$t('供应商邮箱'),
                align: 'left',
                field: 'vendorEmail',
              },
              {
                name: 'contactPeople',
                label: this.$t('供应商联系人'),
                align: 'left',
                field: 'contactPeople'
              },
              {
                name: 'createTime',
                label: this.$t('创建时间'),
                align: 'left',
                field: 'createTime',
                sortable: true
              },
              {
                name: 'lastUpdateTime',
                label: this.$t('最后更新时间'),
                align: 'left',
                field: 'lastUpdateTime',
                sortable: true
              },
              {
                name: 'examineStatus',
                label: this.$t('审批状态'),
                align: 'left',
                field: 'examineStatus',
                sortable: true
              },
              {
                name: 'examineContent',
                label: this.$t('审批理由'),
                align: 'left',
                field: 'examineContent'
              },
              {
                name: 'dataSources',
                label: this.$t('数据来源'),
                align: 'left',
                field: 'dataSources',
                sortable: true
              }
            ]
          },
          toolbarOptions: function() {
            return [
              ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
              ['token', 'hr', 'link', 'custom_btn'],
              ['print', 'fullscreen'],
              [
                {
                  label: this.$q.i18n.editor.formatting,
                  icon: this.$q.icon.editor.formatting,
                  list: 'no-icons',
                  options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']
                },
                {
                  label: this.$q.i18n.editor.fontSize,
                  icon: this.$q.icon.editor.fontSize,
                  fixedLabel: true,
                  fixedIcon: true,
                  list: 'no-icons',
                  options: ['size-1', 'size-2', 'size-3', 'size-4', 'size-5', 'size-6', 'size-7']
                },
                {
                  label: this.$q.i18n.editor.defaultFont,
                  icon: this.$q.icon.editor.font,
                  fixedIcon: true,
                  list: 'no-icons',
                  options: ['default_font', 'arial', 'arial_black', 'comic_sans', 'courier_new', 'impact', 'lucida_grande', 'times_new_roman', 'verdana']
                },
                'removeFormat'
              ],
              ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
              [
                {
                  label: this.$q.i18n.editor.align,
                  icon: this.$q.icon.editor.align,
                  fixedLabel: true,
                  list: 'only-icons',
                  options: ['left', 'center', 'right', 'justify']
                }
              ],
              ['undo', 'redo']
            ]
          },
          pages: function() {
            return Math.ceil(this.total / this.serverPagination.rowsPerPage)
          }
        },
        created: function () {
          // vue-i18n
          this.$i18n.locale = LANGUGE
          this.getList({
            pagination: this.serverPagination
          })
          if (this.$q.cookies.has('supplier_visible_columns')) {
            this.visibleColumns = this.$q.cookies.get('supplier_visible_columns')
          }
          if (this.$q.cookies.has('supplier_visible_columnsTab6')) {
            this.visibleColumns = this.$q.cookies.get('supplier_visible_columnsTab6')
          }
          if (this.$q.sessionStorage.has('supplierList_selected_rows')) {
            this.selected = this.$q.sessionStorage.get.item('supplierList_selected_rows')
          }
          
        },
        watch: {
          'serverPagination.page': function (page) {
            this.getList({
              pagination: this.serverPagination
            })
          },
          selected: function(selected) {
            this.$q.sessionStorage.set('supplierList_selected_rows', this.selected)
          },
          visibleColumns: function (visibleColumns) {
            this.$q.cookies.set('supplier_visible_columns', this.visibleColumns, {
              expires: 30,
              domian: COOKIES_DOMIAN,  // 这里替换域名
              path: COOKIES_PATH  // 设置目录
            })
          },
          visibleColumnsTab6: function (visibleColumnsTab6) {
            this.$q.cookies.set('supplier_visible_columnsTab6', this.visibleColumnsTab6, {
              expires: 30,
              domian: COOKIES_DOMIAN,  // 这里替换域名
              path: COOKIES_PATH  // 设置目录
            })
          }
        },
        methods: {
          getList: function (arg) {
            this.listLoading = true
            this.serverPagination = arg.pagination
            var that = this
            // tab 6 单独查询字段
            var isAllow = ''
            if (this.invitationStatus == '5') {
              isAllow = this.searchForm.search_EQ_examineStatus
            }
            axios({
              method: 'post',
              url: '/manager/new/invitationToRegister',
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : ''),
                search_LIKE_vendorName: this.searchForm.search_LIKE_vendorName,
                search_LIKE_vendorEmail: this.searchForm.search_LIKE_vendorEmail,
                search_LIKE_contactPeople: this.searchForm.search_LIKE_contactPeople,
                search_LIKE_contactTelephone: this.searchForm.search_LIKE_contactTelephone,
                search_LIKE_dataSources: this.searchForm.search_LIKE_dataSources,
                search_EQ_invitationStatus: this.invitationStatus,
                search_EQ_examineStatus: isAllow
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.data = data.rows
                that.total = data.total
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
              that.listLoading = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          tabClick: function(index) {
            this.invitationStatus = index
            this.isShowMoreSearch = false
            this.getList({
              pagination: {
                page: 1,
                rowsNumber: 5,
                rowsPerPage: 5
              }
            })
            this.selected = []
            this.$q.sessionStorage.remove('supplierList_selected_rows')
          },
          toggleShowMoreSearch: function () {
            this.isShowMoreSearch = !this.isShowMoreSearch
          },
          // 重置
          reset: function () {
            this.searchForm = {
              search_LIKE_vendorName: '',
              search_LIKE_vendorEmail: '',
              search_LIKE_contactPeople: '',
              search_LIKE_contactTelephone: '',
              search_LIKE_dataSources: ''
            }
            this.getList({ pagination: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 5
            }})
          },
          
          openAddModal: function () {
            this.addOrEditForm = {
              vendorName: '',
              vendorEmail: '',
              contactPeople: '',
              contactTelephone: '',
              remarks: '',
              dataSources: '内部添加'
            }
            this.$v.addOrEditForm.$reset()
            this.addOrEdit = 0
            this.addOrEditModal = true
          },
          openEditModal: function (arg) {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/invitationToRegister/byId',
              data: {
                id: arg.id
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.addOrEdit = 1
                that.addOrEditForm = {
                  vendorName: data.single.vendorName,
                  vendorEmail: data.single.vendorEmail,
                  contactPeople: data.single.contactPeople,
                  contactTelephone: data.single.contactTelephone,
                  dataSources: data.single.dataSources,
                  remarks: data.single.remarks
                }
                that.addOrEditModal = true
                that.editModuleId = data.single.id
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 单个验证 
          validateName: function() {
            this.$v.addOrEditForm.vendorName.$touch()
            var that = this
            if (this.$v.addOrEditForm.vendorName.required) {
              
            } 
          },
          // 单行删除
          deleteRowComfirm: function (row) {
            if (row.examineStatus == 1) {
              this.$q.notify({
                message: '已通过审批的不能被删除!',
                icon: 'warning',
                type: 'warning',
                position: 'top-right'
              })
            } else {
              var that = this
              this.$q.dialog({
                title: this.$t('确认')+'？',
                message: this.$t('您确定要删除该条信息吗')+'？',
                ok: {
                  label: this.$t('确认'),
                  flat: true
                },
                cancel: {
                  label: this.$t('取消'),
                  flat: true
                }
              })
              .then(function() {
                axios({
                  method: 'post',
                  url: '/manager/new/invitationToRegister/deleteManuscriptVendor',
                  data: {
                    ids: row.id,
                    type: 1
                  }
                })
                .then(function(data) {
                  if (data.statusCode == 200) {
                    that.$q.notify({
                      message: '删除成功!',
                      icon: 'warning',
                      type: 'warning',
                      position: 'top-right'
                    })
                  } else {
                    that.$q.notify({
                      message: that.$t(STATUS_CODE[data.statusCode]),
                      icon: 'error_outline',
                      type: 'negative',
                      position: 'top-right'
                    })
                  }
                  that.getList({ pagination: that.serverPagination })
                })
                .catch(function(err) {
                  console.log(err)
                })
              })
              .catch(function() {
                // 选择"Cancel"或作了关闭操作
              })
            }
          },
          // 批量删除
          deleteComfirm: function () {
            var idSelected = []
            this.selected.forEach(function(e) {
              idSelected.push(e.id)
            })
            var that = this
            if (this.selected.length > 0) {
              var notAllow = []  // 非通过审批 数组
              var count = 0
              this.selected.map(function(item) {
                if (item.examineStatus != 1) {
                  notAllow.push(item)
                } else {
                  count++
                }
              })
              if (count > 0) {
                this.$q.dialog({
                  title: '警告',
                  message: '已通过审批的供应商不能被删除，需要为您过滤掉这些供应商吗？',
                  ok: {
                    label: '好的',
                    flat: true,
                    color: 'primary'
                  },
                  cancel: {
                    label: '不,谢谢',
                    flat: true,
                    color: 'primary'
                  }
                })
                .then(function() {
                  that.selected = notAllow
                })
                .catch(function() {
                })
              } else {
                this.$q.dialog({
                  title: '确认删除？',
                  message: '确认要删除选中的'+ this.selected.length + '条数据吗？',
                  ok: {
                    label: '确认',
                    flat: true
                  },
                  cancel: {
                    label: '取消',
                    flat: true
                  }
                })
                .then(function() {
                  axios({
                    method: 'post',
                    url: '/manager/new/invitationToRegister/deleteManuscriptVendor',
                    data: {
                      ids: idSelected.join(','),
                      type: 1
                    }
                  })
                  .then(function(data) {
                    if (data.statusCode == 200) {
                      that.$q.notify({
                        message: '删除成功!',
                        icon: 'done',
                        type: 'positive',
                        position: 'top-right'
                      })
                      that.selected = []
                    } else if (data.statusCode == 201) {
                      that.$q.notify({
                        message: '部分删除成功!失败条数：' + data.rowsStatusCode.length,
                        icon: 'done',
                        type: 'positive',
                        position: 'top-right'
                      })
                    } else {
                      that.$q.notify({
                        message: that.$t(STATUS_CODE[data.statusCode]),
                        icon: 'error_outline',
                        type: 'negative',
                        position: 'top-right'
                      })
                    }
                    that.getList({ pagination: that.serverPagination })
                  })
                  .catch(function(err) {
                    console.log(err)
                  })
                })
                .catch(function() {
                  // 选择"Cancel"或作了关闭操作
                })
              }
            } else {
              this.$q.notify({
                message: '请勾选您要删除的内容',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          supplierRestrict: function() {
            var idSelected = []
            this.selected.forEach(function(e) {
              idSelected.push(e.id)
            })
            var that = this
            if (this.selected.length > 0) {
              var allow = []  
              var count = 0
              this.selected.map(function(item) {
                if (item.examineStatus != 1) {
                  allow.push(item)
                } else {
                  count++
                }
              })
              if (count > 0) {
                this.$q.dialog({
                  title: '警告',
                  message: '已通过审批的供应商不能被限制，需要为您过滤掉这些供应商吗？',
                  ok: {
                    label: '好的',
                    flat: true,
                    color: 'primary'
                  },
                  cancel: {
                    label: '不,谢谢',
                    flat: true,
                    color: 'primary'
                  }
                })
                .then(function() {
                  that.selected = allow
                })
                .catch(function() {
                })
              } else {
                this.$q.dialog({
                  title: '确认？',
                  message: '确认要将选中的'+ this.selected.length + '个供应商加入黑名单吗？',
                  ok: {
                    label: '确认',
                    flat: true
                  },
                  cancel: {
                    label: '取消',
                    flat: true
                  }
                })
                .then(function() {
                  axios({
                    method: 'post',
                    url: '/manager/new/invitationToRegister/limitSupplier',
                    data: {
                      ids: idSelected.join(',')
                    }
                  })
                  .then(function(data) {
                    if (data.statusCode == 200) {
                      that.$q.notify({
                        message: '已成功加入黑名单!',
                        icon: 'done',
                        type: 'positive',
                        position: 'top-right'
                      })
                      that.selected = []
                    } else if (data.statusCode == 201) {
                      that.$q.notify({
                        message: '部分加入黑名单成功!失败个数：' + data.rowsStatusCode.length,
                        icon: 'done',
                        type: 'positive',
                        position: 'top-right'
                      })
                    } else {
                      that.$q.notify({
                        message: that.$t(STATUS_CODE[data.statusCode]),
                        icon: 'error_outline',
                        type: 'negative',
                        position: 'top-right'
                      })
                    }
                    that.getList({ pagination: that.serverPagination })
                  })
                  .catch(function(err) {
                    console.log(err)
                  })
                })
                .catch(function() {
                  // 选择"Cancel"或作了关闭操作
                })
              }
            } else {
              this.$q.notify({
                message: '请勾选您要限制的供应商',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          saveAddHandler: function () {
            this.$v.addOrEditForm.$touch()
            if (!this.$v.addOrEditForm.$error) {
              this.btnLoading = true
              var that = this
              axios({
                method: 'post',
                url: '/manager/new/invitationToRegister/addManuscriptVendorByNameAndEmail',
                data: {
                  vendorName: this.addOrEditForm.vendorName,
                  vendorEmail: this.addOrEditForm.vendorEmail,
                  contactPeople: this.addOrEditForm.contactPeople,
                  contactTelephone: this.addOrEditForm.contactTelephone,
                  dataSources: this.addOrEditForm.dataSources,
                  remarks: this.addOrEditForm.remarks
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: that.$t('新增成功'),
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.addOrEditModal = false
                that.getList({ pagination: that.serverPagination })
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          },
          saveEditHandler: function () {
            this.$v.addOrEditForm.$touch()
            if (!this.$v.addOrEditForm.$error) {
              var that = this
              this.btnLoading = true
              axios({
                method: 'post',
                url: '/manager/new/invitationToRegister/updateManuscriptVendorByNameAndEmail',
                data: {
                  id: this.editModuleId,
                  vendorName: this.addOrEditForm.vendorName,
                  vendorEmail: this.addOrEditForm.vendorEmail,
                  contactPeople: this.addOrEditForm.contactPeople,
                  contactTelephone: this.addOrEditForm.contactTelephone,
                  dataSources: this.addOrEditForm.dataSources,
                  remarks: this.addOrEditForm.remarks
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: '编辑成功',
                    icon: 'done',
                    type: 'positive',
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
                that.addOrEditModal = false
                that.getList({ pagination: that.serverPagination })
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          },
          goSupplierInvite: function() {
            var that = this
            var _flag = true
            var _saveArr = []
            if (this.selected.length > 0) {
              this.selected.map(function(item) {
                if (item.invitationStatus == 5) {
                  _flag = false
                } else {
                  _saveArr.push(item)
                }
              })
              if(!_flag) {
                this.$q.dialog({
                  title: '警告',
                  message: '已注册供应商不能再次邀请！需要我帮您过滤这些供应商吗？',
                  ok: {
                    label: '好的',
                    flat: true,
                    color: 'primary'
                  },
                  cancel: {
                    label: '不,谢谢',
                    flat: true,
                    color: 'primary'
                  }
                })
                .then(function() {
                  that.selected = _saveArr
                  that.goSupplierInvite()
                })
                .catch(function() {
                })
              } else {
                window.location.href = "supplierInvite.html"
              }
              
            } else {
              this.$q.notify({
                message: '请勾选您要邀请的供应商',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          // 通过
          supplierAllow: function(id) {
                this.supplierAllowModal = true
                this.getTreeData(this.selected[0].id)
                
            var that = this
            if (this.selected.length == 0) {
              this.$q.notify({
                message: '请先勾选供应商',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            } else if(this.selected.length > 1) {
              this.$q.notify({
                message: '不能批量通过',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            } else {
              if(this.selected[0].examineStatus == 2) {
                this.$q.notify({
                  message: '该供应商已被驳回',
                  type: 'warning',
                  icon: 'warning',
                  position: 'top-right'
                })
              } else if(this.selected[0].examineStatus == 1) {
                this.$q.notify({
                  message: '该供应商已被通过，请勿重复操作',
                  type: 'warning',
                  icon: 'warning',
                  position: 'top-right'
                })
              } else {
                axios({
                  method: 'post',
                  url: '/manager/new/invitationToRegister/getfuuAccunt/' + this.selected[0].id,
                })
                .then(function(data) {
                  that.allowForm.loginName = data.single
                })
                .catch(function(err) {
                  console.log(err, '获取登录账号时捕获到异常')
                })
                // this.supplierAllowModal = true
                this.confirmStep = 'baseInfo'
                this.allowForm.materialCategoryIds = []
                this.allowForm.isemail = '1'
                this.allowForm.content = '符合要求'
                this.$v.allowForm.$reset()
                // this.getTreeData(this.selected[0].id)
              }
            }
          },
          // 获取表格 tree 的数据
          getTreeData: function(id) {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/invitationToRegister/tree/'+ id
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                if (data.rows == undefined || data.rows == null) {
                  data.rows = []
                } 
                that.meterialLevelData = data.rows
                that.nodeTicked = [data.rows[0].value]
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          supplierAllowConfirm: function() {
            this.$v.allowForm.$touch()
            if (!this.$v.allowForm.$error && this.nodeTicked.length > 0) {
              var that = this
              this.allowBtnLoading = true
              axios({
                method: 'post',
                url: '/manager/new/invitationToRegister/adoptSupplier',
                data: {
                  ids: this.selected[0].id,
                  loginName: this.allowForm.loginName,
                  materialCategoryIds: this.nodeTicked.join(','),
                  isemail: this.allowForm.isemail,
                  content: this.allowForm.content
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.$q.notify({
                    message: '已审批通过!',
                    type: 'positive',
                    icon: 'done',
                    position: 'top-right'
                  })
                  that.selected = []
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
                that.allowBtnLoading = false
                that.getList({ pagination: that.serverPagination })
                that.supplierAllowModal = false
              })
              .catch(function(err) {

              })
            } else {
              this.$q.notify({
                message: '请完整填写信息!',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          // 驳回
          supplierReject: function() {
            var that = this
            var _flag = true
            var _rejectArr = []
            if (this.selected.length > 0) {
              this.selected.map(function(item) {
                if (item.examineStatus == 1 || item.examineStatus == 2) {
                  _flag = false
                } else {
                  _rejectArr.push(item)
                }
              })
              if(!_flag) {
                that.$q.dialog({
                  title: '警告',
                  message: '已通过或驳回的供应商不能进行该操作！需要我帮您过滤这些供应商吗？',
                  ok: {
                    label: '好的',
                    flat: true,
                    color: 'primary'
                  },
                  cancel: {
                    label: '不,谢谢',
                    flat: true,
                    color: 'primary'
                  }
                })
                .then(function() {
                  that.selected = _rejectArr
                  that.supplierReject()
                })
                .catch(function() {
                })
              } else {
                that.supplierRejectModal = true
                that.rejectForm = {
                  content: '',
                  limitSupplier: '0'
                }
              }
            } else {
              this.$q.notify({
                message: '请勾选您要驳回的供应商',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          supplierRejectConfirm: function() {
            var that = this
            var idSelected = []
            this.rejectBtnLoading = true
            this.selected.forEach(function(e) {
              idSelected.push(e.id)
            })
            axios({
              method: 'post',
              url: '/manager/new/invitationToRegister/rejectSupplier',
              data: {
                ids: idSelected.join(','),
                limitSupplier: that.rejectForm.limitSupplier,
                content: that.rejectForm.content
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.$q.notify({
                  message: '驳回成功!',
                  type: 'positive',
                  icon: 'done',
                  position: 'top-right'
                })
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
              that.rejectBtnLoading = false
              that.getList({ pagination: that.serverPagination })
              that.supplierRejectModal = false
            })
            .catch(function(err) {

            })
          },
          invitationStatusToText: function(invitationStatus) {
            return INVITATIONS_STATUS[invitationStatus-1]
          },
          // 打开查看form html modal
          openFormHtmlModal: function(id) {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/formHtmlNew/lookRegisterFormHtmlNew',
              data: {
                id: id
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.expandRowHtml = data.single.content
                that.lookFormHtmlModal = true
                // layui.config({
                //   base: '../lib/js/'
                // }).extend({
                //   formSelects: 'formSelects-v3'
                // })
                // layui.use(['form', 'layer', 'laydate', 'upload', 'formSelects', 'laytpl'], function() {
                //   var form = layui.form
                //   var laydate = layui.laydate
                //   var layer = layui.layer
                //   var upload = layui.upload
                //   var formSelects = layui.formSelects
                //   var laytpl = layui.laytpl
                  
                //   // TODO: 错误提示
                //   //执行laydate实例
                //   $('input').map(function(index, item) {
                //       var _id = $(item).attr('id')
                //       if (_id != undefined || _id != null) {
                //           if (_id.indexOf('datePicker-') > -1) {
                //               console.log(_id)
                //               laydate.render({
                //                   elem: '#' + _id, //指定元素
                //                   type: 'datetime'
                //               })
                //           }
                //       }
                //   })
                //   // 执行 三级级联
                //   $('.placePicker').map(function(index, item) { // 取得包裹元素
                //       var country = '', province = '', city = ''  // 国家省份城市 选择的值
                //       var place = ''  // 三者合并的值
                //       // 如果有值  则回显
                //       var hiddenInput = $(item).find('input[type="hidden"]')
                //       if ($(hiddenInput).val()!=undefined && $(hiddenInput).val()!=null) {
                //           country = $(hiddenInput).val().split(',')[0]
                //           province = $(hiddenInput).val().split(',')[1]
                //           city = $(hiddenInput).val().split(',')[2]
                //       }
                //       $(item).find('select').map(function(index2, item2) {  // 遍历select
                //           var _selector = $(item2).attr('lay-filter')
                //           var _filter = 'select(' + _selector +')'
                //           var _num = _selector.split('-')[1]  // 记录id后的随机数
                //           if (_selector.indexOf('country-') > -1) { // 不同层不同事件
                //               if (country != '') {
                //                   // 取得回显国家下 省份的值 
                //                   $('#'+_selector).val(country).trigger('change')
                //                   $.ajax({
                //                       type: 'post',
                //                       url:  $('#'+_selector).attr('data-url') + country,
                //                       dataType: 'json',
                //                       contentType: 'application/json;charset=utf-8',
                //                       success: function(data) {
                //                           if (data.length > 0) {
                //                               var _optionHtml = '<option value="">请选择省份</>'
                //                               data.map(function(province) {
                //                                   _optionHtml += '<option value="' + province.id + '">'
                //                                   _optionHtml +=    province.name
                //                                   _optionHtml += '</option>'
                //                               })
                //                               $('#province-' + _num).html(_optionHtml)
                //                               // 回显省份
                //                               $('#province-' + _num).val(province).trigger('change')
                //                           } else {
                //                               $('#province-' + _num).html('<option value="">无可选的省份</option>')
                //                               $('#city-' + _num).html('<option value="">无可选的城市</option>')
                //                           }
                //                           form.render('select')
                //                       },
                //                       error: function(err) {

                //                       }
                //                   })
                //               }
                //               // 监听国家的变化  取得对应的省份
                //               form.on(_filter, function(data){  
                //                   country = data.value
                //                   $.ajax({
                //                       type: 'post',
                //                       url: $(data.elem).attr('data-url') + data.value,
                //                       dataType: 'json',
                //                       contentType: 'application/json;charset=utf-8',
                //                       success: function(data) {
                //                           if (data.length > 0) {
                //                               var _optionHtml = '<option value="">请选择省份</>'
                //                               data.map(function(province) {
                //                                   _optionHtml += '<option value="' + province.id + '">'
                //                                   _optionHtml +=    province.name
                //                                   _optionHtml += '</option>'
                //                               })
                //                               $('#province-' + _num).html(_optionHtml)
                //                           } else {
                //                               $('#province-' + _num).html('<option value="">无可选的省份</option>')
                //                               $('#city-' + _num).html('<option value="">无可选的城市</option>')
                //                           }
                //                           form.render('select')
                //                       },
                //                       error: function(err) {

                //                       }
                //                   })
                //                   place = country + ',' + province + ',' + city
                //                   // 将当前选择的赋值给隐藏的Input
                //                   formHtmlRender.placeValue(place, item)
                //               })
                //           }
                //           if (_selector.indexOf('province-') > -1) { // 不同层不同事件
                //               if (province != '') {
                //                   // 取得回显国家下 省份的值 
                //                   $('#'+_selector).val(province).trigger('change')
                //                   $.ajax({
                //                       type: 'post',
                //                       url:  $('#'+_selector).attr('data-url') + province,
                //                       dataType: 'json',
                //                       contentType: 'application/json;charset=utf-8',
                //                       success: function(data) {
                //                           if (data.length > 0) {
                //                               var _optionHtml = '<option value="">请选择城市</>'
                //                               var __selector = '#' + _selector
                //                               data.map(function(city) {
                //                                   _optionHtml += '<option value="' + city.id + '">'
                //                                   _optionHtml +=    city.name
                //                                   _optionHtml += '</option>'
                //                               })
                //                               $('#city-' + _num).html(_optionHtml)
                //                               // 回显城市
                //                               $('#city-' + _num).val(city).trigger('change')
                //                           } else {
                //                               $('#city-' + _num).html('<option value="">无可选的城市</option>')
                //                           }
                //                           form.render('select')
                //                       },
                //                       error: function(err) {

                //                       }
                //                   })
                //               }
                //               form.on(_filter, function(data){  
                //                   province = data.value
                //                   $.ajax({
                //                       type: 'post',
                //                       url: $(data.elem).attr('data-url') + data.value,
                //                       dataType: 'json',
                //                       contentType: 'application/json;charset=utf-8',
                //                       success: function(data) {
                //                           if (data.length > 0) {
                //                               var _optionHtml = '<option value="">请选择城市</>'
                //                               var __selector = '#' + _selector
                //                               data.map(function(city) {
                //                                   _optionHtml += '<option value="' + city.id + '">'
                //                                   _optionHtml +=    city.name
                //                                   _optionHtml += '</option>'
                //                               })
                //                               $('#city-' + _num).html(_optionHtml)
                //                           } else {
                //                               $('#city-' + _num).html('<option value="">无可选的城市</option>')
                //                           }
                //                           form.render('select')
                //                       },
                //                       error: function(err) {

                //                       }
                //                   })
                //                   place = country + ',' + province + ',' + city
                //                   // 将当前选择的赋值给隐藏的Input
                //                   formHtmlRender.placeValue(place, item)
                //               })
                //           }
                //           if (_selector.indexOf('city-') > -1) { // 不同层不同事件
                //               form.on(_filter, function(data){  
                //                   city = data.value
                //                   place = country + ',' + province + ',' + city
                //                   // 将当前选择的赋值给隐藏的Input
                //                   formHtmlRender.placeValue(place, item)
                //               })
                //           }
                //       })
                  
                //   })
                //   //执行实例 文件上传
                //   $('.fileUpload').map(function(index, item) {
                //       $(item).find('button').map(function(index2, item2) {
                //       var _selector = $(item2).attr('id')
                //       upload.render({
                //           elem: '#' + _selector,
                //           url: baseURL + '/manager/apqp/index/uploadOperateNew', //上传接口
                //           method: 'post',
                //           field: 'files',
                //           accept: 'file',
                //           done: function(data){
                //               //上传完毕回调
                //               console.log(data)
                //               var downloadUrl = '', downloadName = ''
                //               if (data.path != null && data.name != null) {
                //                   var _filename = encodeURI(encodeURIComponent(data.path.split('.')[0]))
                //                   downloadUrl = baseURL + '/common/download/' + _filename + '/' + data.path.split('.')[1]
                //                   downloadName = data.name
                //               } 
                //               // $('input[data-name='+_selector+']').val(data.name)
                //               $('input[data-path='+_selector+']').val(downloadUrl)
                //           },
                //           error: function(){
                //           //请求异常回调
                //           }
                //       })
                //       })
                //   })
                //   // 自定义验证 
                //   form.verify({
                //       username: function(value, item){ //value：表单的值、item：表单的DOM对象
                //           if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                //               return '用户名不能有特殊字符';
                //           }
                //           if(/(^\_)|(\__)|(\_+$)/.test(value)){
                //               return '用户名首尾不能出现下划线\'_\'';
                //           }
                //           if(/^\d+\d+\d$/.test(value)){
                //               return '用户名不能全为数字';
                //           }
                //       },
                //       mustChecked: function(value, item) {
                //           var elem = $(item).find('div.layui-form-checked')
                //           if (elem.length == 0) {
                //               return '至少选中一项'
                //           }
                //       },
                //       phone: function(value, item) {
                //           if(/^[1][3,4,5,6,7,8][0-9]{9}$/.test(value)){
                //               return '手机号码格式有误';
                //           }
                //       },
                //       number: function(value, item) {
                //           if(/[^\d^\.]+/g.test(value)){
                //               return '只能为数字';
                //           }
                //       }
                //   })
                //   form.render()
                // })
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {

            })
          }
        }
      })
    </script>
  </body>
</html>

